<template>
	<div :id="model.id" class="division" :style="{backgroundColor: model.data.bgColor, height: `${model.data.height}px`}"></div>
</template>

<script lang="ts">
	import { toRefs, reactive } from 'vue';
	export default {
		name: 'division',
		props: {
			terminal: {
				type: Number,
				default: 1
			},
			model: {
				type: Object
			}
		},
		setup(props) {
			const state = reactive({
				terminal: props.terminal,
				model: props.model,
			});
		
			return {
				...toRefs(state),
			};
		}
	}
</script>

<style scoped>
	.division {
		width: 100%;
	}
</style>
